<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大学生日常生活指南</title>
    <style>
        /* 基础样式重置 */
        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'SimHei', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f8ff;
        }

        .menu-container {
            max-width: 900px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 28px;
        }

        /* 菜单基础样式 */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* 一级菜单样式 - 使用校园蓝为主题色 */
        .level-1 > li {
            display: inline-block;
            position: relative;
            margin-right: 10px;
        }

        .level-1 > li > a {
            display: block;
            padding: 12px 20px;
            background-color: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .level-1 > li > a:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }

        /* 二级菜单样式 - 使用浅蓝色 */
        .level-2 {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 220px;
            background-color: #eaf2f8;
            border: 1px solid #d4e6f1;
            border-radius: 5px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
            z-index: 100;
        }

        .level-1 > li:hover > .level-2 {
            display: block;
        }

        .level-2 > li {
            position: relative;
            border-bottom: 1px solid #d4e6f1;
        }

        .level-2 > li:last-child {
            border-bottom: none;
        }

        .level-2 > li > a {
            display: block;
            padding: 10px 20px;
            color: #2c3e50;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .level-2 > li > a:hover {
            background-color: #d4e6f1;
            padding-left: 25px;
        }

        /* 三级菜单样式 - 使用更浅的蓝色 */
        .level-3 {
            display: none;
            position: absolute;
            left: 100%;
            top: 0;
            min-width: 180px;
            background-color: #f5fbfe;
            border: 1px solid #d4e6f1;
            border-radius: 5px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
            z-index: 101;
        }

        .level-2 > li:hover > .level-3 {
            display: block;
        }

        .level-3 > li > a {
            display: block;
            padding: 8px 15px;
            color: #34495e;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .level-3 > li > a:hover {
            background-color: #d4e6f1;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <div class="menu-container">
        <h1>大学生日常生活指南</h1>
        
        <!-- 一级菜单 -->
        <ul class="level-1">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">学习生活</a>
                <!-- 二级菜单 -->
                <ul class="level-2">
                    <li>
                        <a href="#">课程学习</a>
                        <!-- 三级菜单 -->
                        <ul class="level-3">
                            <li><a href="#">专业课</a></li>
                            <li><a href="#">公共课</a></li>
                            <li><a href="#">选修课</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">考试相关</a>
                        <ul class="level-3">
                            <li><a href="#">期中考试</a></li>
                            <li><a href="#">期末考试</a></li>
                            <li><a href="#">等级考试</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">学术资源</a>
                        <ul class="level-3">
                            <li><a href="#">图书馆</a></li>
                            <li><a href="#">实验室</a></li>
                            <li><a href="#">学术讲座</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">校园生活</a>
                <ul class="level-2">
                    <li>
                        <a href="#">住宿餐饮</a>
                        <ul class="level-3">
                            <li><a href="#">宿舍生活</a></li>
                            <li><a href="#">食堂美食</a></li>
                            <li><a href="#">校外租房</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">社团活动</a>
                        <ul class="level-3">
                            <li><a href="#">兴趣社团</a></li>
                            <li><a href="#">学生会</a></li>
                            <li><a href="#">志愿者</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">个人发展</a>
                <ul class="level-2">
                    <li>
                        <a href="#">职业规划</a>
                        <ul class="level-3">
                            <li><a href="#">实习信息</a></li>
                            <li><a href="#">就业指导</a></li>
                            <li><a href="#">考研准备</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">技能提升</a>
                        <ul class="level-3">
                            <li><a href="#">外语学习</a></li>
                            <li><a href="#">计算机技能</a></li>
                            <li><a href="#">资格证书</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">校园服务</a>
                <ul class="level-2">
                    <li><a href="#">教务系统</a></li>
                    <li><a href="#">校园卡服务</a></li>
                    <li><a href="#">心理咨询</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>